<template>
    <div v-loading="loading">
        <div class="editor">
            <quill-editor v-model="text" :options="option"></quill-editor>
            <el-upload class="avatar-uploader" name="image" :action="upImage.serverUrl" :headers="upImage.header" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
        </el-upload>
        </div>
        <button @click="onSubmit()">提交</button>
    </div>
</template>
<script>
import conf from '@/components/api/config'
export default {
    computed:{
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    },
    data(){
        return {
            loading:false,
            text:'',
            upImage:{
                serverUrl: conf.api + '/up',
                header:{},
            },
            option:{
                modules:{
                    toolbar:{
                        container: [
                            ['bold', 'italic', 'underline', 'strike','blockquote',{ 'direction': 'rtl' },{ 'color': [] }, { 'background': [] },{ 'align': [] },'clean'],
                            ['code-block'],['link','image','video'],
                            [{ 'script': 'sub'}, { 'script': 'super' }],
                            [{ 'header': [1,2,3,4,5,6,false] }],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            [{ 'indent': '-1'}, { 'indent': '+1' }],[{ 'font': [] }], 
                        ],
                        handlers:{
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('.avatar-uploader input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    created(){
        // console.log(this.$refs)
    },
    methods:{
        onSubmit(){
            console.log(this.text)
        },
        // 上传图片前
        beforeUpload(file) {
            if(file.type != 'image/jpeg')
            {
                this.$notify({title:'提示',message:'图片只能是 JPG、JPEG、PNG 格式!',type:"warning"})
                return false
            }
            else if(file.size > 1024 * 1024 * 20)
            {
                this.$notify({title:'提示',message:'图片不能超过 20MB!',type:"warning"})
                return false
            }
            // this.quillUpdateImg = true
        },
        // 上传图片成功
        uploadSuccess(res, file) {
            let data = res.result
            if (res.status === 200 && data.url !== null) {
                this.text = this.text + '<img src="' + data.url +'" alt="">'
            } else {
                this.$notify({title:'提示',message:'图片插入失败!',type:"warning"})
            }
            // loading动画消失
            // this.quillUpdateImg = false
        },
        // 上传图片失败
        uploadError(res, file) {
            // this.quillUpdateImg = false
            this.$notify({title:'提示',message:'图片插入失败!',type:"warning"})
        }
    }
}
</script>
<style lang="scss" scoped>
.quill-editor{
    height: 500px;
    margin-bottom: 25px;
}
img{
    max-width: 300px;
}
</style>
